<template>

  <div class="sub-category">
    <div class="container">
      <!-- 面包屑区域 -->
      <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <XtxBreadItem :to="`/category/${subCategoryData.parentId}`">
          {{ subCategoryData.parentName }}
        </XtxBreadItem>
        <XtxBreadItem>{{ subCategoryData.name }}</XtxBreadItem>
      </XtxBread>
     </div>

     <!-- 筛选区 -->
   <div class="sub-filter">
     <div class="item">
       <div class="head">品牌：</div>
       <div class="body">
         <a href="javascript:;"
         v-for="item in subCategoryData.brands"
         :key="item.id"
         @click="changeBrand(item)"
         >{{item.name}}</a>
</div>
       </div>
       <div class="item"
       v-for="itm in subCategoryData.saleProperties"
       :key="itm.id"
       >
        <div class="head">{{itm.name}}：</div>
       <div class="body">
         <a href="javascript:;"
         v-for="i in itm.properties"
         :key="i.id"
         @click="toggleSelected(i,itm)"
         :class="{active:i.selected===true}"
         >{{i.name}}</a>

       </div>
     </div>

   </div>
   <!-- 排序功能实现 -->
  <div class="aa">
<div class="sort-list-container">
   <div class='sub-sort'>
    <div class="sort">
      <!-- publishTime(最新)，orderNum(人气)，price(价格)， evaluateNum(评论) -->
      <a href="javascript:;" @click="changeSort('publishTime')"
      :class="{active:sortField==='publishTime'}"
      >默认排序</a>
      <a href="javascript:;" @click="changeSort('orderNum')"
  :class="{active:sortField==='orderNum'}"
      >最新商品</a>
      <a href="javascript:;" @click="changeSort('price')"
  :class="{active:sortField==='price'}"
      >最高人气</a>
      <a href="javascript:;" @click="changeSort('evaluateNum')"
  :class="{active:sortField==='evaluateNum'}"
      >评论最多</a>
    </div>
  </div>
<div class="a">
    <GoodsItem v-for="a in list " :key="a.id" :good="a"/>
</div>
</div>
</div>
 <XtxInfiniteLoad @load="loadNextList" :isFinished="isFinished" :isLoading="isLoading"/>
  </div>

</template>
<script>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { findSubCategoryFilter, findSubCategoryGoods } from '@/api/category'
import GoodsItem from '@/views/Category/components/goods-item.vue'

export default {
  name: 'SubBread',
  components: {
    GoodsItem

  },
  setup () { // 获取分类数据
  // publishTime(最新)，orderNum(人气)，price(价格)， evaluateNum(评论)
    const sortField = ref('publishTime')// 点击默认排序切换颜色
    const subCategoryData = ref({})
    const route = useRoute()
    const isFinished = ref(false)
    const isLoading = ref(true)
    async function loadSubData () {
      const res = await findSubCategoryFilter(route.params.id)
      console.log(res, 'Ni')
      subCategoryData.value = res.result

      // 品牌  subCategoryData.value.brands  没有‘全部’分类  我们自己添加一个全部的分类
      // 在品牌list中的头上添加一个全部分类  unshift
      subCategoryData.value.brands.unshift({
        name: '全部',
        id: null
      })// 即规格也需要全部，遍历数据之后加上这两个对象即可
      subCategoryData.value.saleProperties.forEach((item) => {
        item.properties.unshift({
          name: '全部',
          id: null
        })
        // 给每一个规格添加一个专门用来控制是否激活的字段 selected true 激活 false 不激活
        item.properties.forEach(item => {
          item.selected = false
        })
      })
    }
    const list = ref([])
    const reqparams = {
      page: 1,
      pagesize: 20,
      categoryid: route.params.id,
      sortField: null, // 排序类别
      attrs: [], // 商品属性
      brandId: null// 品牌名称
    }
    // 获取数据列表分雷排序列表
    async function loadData () {
      const re = await findSubCategoryGoods(reqparams)
      list.value = re.result.items
      console.log(re, '数据为')
      isLoading.value = false
    }
    // 排它 先把同类设置为false 再把自己设置为true
    function toggleSelected (i, itm) {
      itm.properties.forEach(item => {
        item.selected = false
      })
      i.selected = true
      if (i.id === null) {
        const index = reqparams.attrs.findIndex(attr => {
          return attr.groupName === itm.name
        })
        if (index > -1) {
          reqparams.attrs.splice(index, 1)
        }
      }

      // 筛选：
      // 正是添加之前，先检测一下当前要添加的项是否已经在attrs中存在一个同类的功能名字，
      // 如果存在就先把同类项删除，再把自己添加进来
      const index = reqparams.attrs.findIndex(attr => {
        return attr.groupName === itm.name
      })
      if (index > -1) {
        reqparams.attrs.splice(index, 1)
      }
      reqparams.attrs.push({
        groupName: itm.name,
        propertyName: i.name
      })
      loadData()
    }
    function changeSort (type) { // 最新商品
      sortField.value = type// 点击加上绿色颜色
      reqparams.sortField = type// 将type每次点击的值给了sortfield排序类别，
      loadData()// 然后重新获取数据
    }
    function changeBrand (item) { // 全部里的釉色美颜
      reqparams.brandId = item.id
      loadData()
    }
    async function loadNextList () { // 加载下一页数据
      // 是否正处于数据获取中 默认值为true 因为在页面一上来的时候mounted中就已经开始加载第一页数据了
    // 等到数据获取到之后再把isLoading设置为false
      isLoading.value = true// 加载时先开启
      reqparams.page++
      const r = await findSubCategoryGoods(reqparams)// 重新获取第二页的数据
      const ne = r.result.items

      if (ne.length === 0) { // 如果他的数据没有了
        isFinished.value = true// 停止监听，开启没有更多数据了
      }
      list.value = [...list.value, ...r.result.items]
      isLoading.value = false// 没有数据关闭加载
    }
    onMounted(() => {
      loadSubData()
      loadData()
    })

    return {
      subCategoryData,
      toggleSelected,
      sortField,
      list,
      reqparams,
      loadData,
      changeSort,
      changeBrand,
      isFinished,
      isLoading,
      loadNextList

    }
  }
}
</script>
<style scoped lang='less'>
  // 筛选区
  .sub-filter {
    background: #fff;
    padding: 25px;
    .item {
      display: flex;
      padding: 10px 0;
      .head {
        width: 80px;
        color: #999;
      }
      .body {
        flex: 1;
        a {
          margin-right: 36px;
          transition: all .3s;
          &.active,
          &:hover {
            color: @xtxColor;
          }
        }
      }
    }
  }
  .sub-sort {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .sort {
    display: flex;
    a {
      height: 30px;
      line-height: 28px;
      border: 1px solid #e4e4e4;
      padding: 0 20px;
      margin-right: 20px;
      color: #999;
      border-radius: 2px;
      position: relative;
      transition: all .3s;
      &.active {
        background: @xtxColor;
        border-color: @xtxColor;
        color: #fff;
      }
      .arrow {
        position: absolute;
        border: 5px solid transparent;
        right: 8px;
        &.up {
          top: 3px;
          border-bottom-color: #bbb;
            &.active {
            border-bottom-color: @xtxColor;
          }
        }
        &.down {
          top: 15px;
          border-top-color: #bbb;
          &.active {
            border-top-color: @xtxColor;
          }
        }
      }
    }
  }
  .check {
    .xtx-checkbox {
      margin-left: 20px;
      color: #999;
    }
  }
}

   .aa{
     margin-top: 20px;
      padding-left: 15px;
     background-color: #fff;

   }
   .a{
     display: flex;
      flex-wrap: wrap;
      .goods-item{
        flex: 1;
      }
   }
</style>
